<template>
    <div id="B">
        {{ data }}
        <C></C>
    </div>
</template>

 <script setup lang="ts">
import { inject,ref } from 'vue'
import C from './C.vue';

// A的后代组件可以通过inject拿到共享出来的数据
// 第一个参数是需要取得数据，第二个参数是默认值（没有拿到数据时默认使用）
let data = inject('data', ref('默认值'))
</script>

<style lang="less" scoped>
#B {
    background-color: rgb(38, 0, 255);
    width: 300px;
    height: 200px;
}
</style>